<template>
    <div>
        <div class="activity-right" style="padding-top:20px;">
            <h1>仓库列表</h1>
            <el-button class='right' type="primary" @click="addDepot">添加仓库</el-button>
            <el-table class="table-common" :data="data" style="width: 100%;">
                <el-table-column label="仓库名称" prop="storeName" width="120">
                </el-table-column>
                <el-table-column label="库房Id" prop="storeId" width="80">
                </el-table-column>
                <el-table-column prop="location" label="仓库地址" width="120">
                </el-table-column>
                <el-table-column prop="phoneNumber" label="联系方式" width="120">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="120">
                    <template slot-scope="scope">{{ $formate(scope.row.createTime,'yyyy-MM-dd') }}</template>
                </el-table-column>
                <el-table-column prop="postage" label="邮费 (元)" width="80">
                </el-table-column>
                <el-table-column prop="brandList" label="仓库品牌" width="120">
                    <template slot-scope="scope">
                        <ul>
                            <li :key="item.id" v-for="item in scope.row.barndList">
                                <span>{{item.name}}</span>
                            </li>
                        </ul>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editDepot(scope)">编辑</el-button>
                        <el-button type="text" size="small" @click="checkCode(scope.row)">查看二维码</el-button>
                        <!-- <el-button type="text" size="small" @click="handleDelate(scope.row.goodsId)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 查看二维码 -->
            <div class='popup-detail storeCode' v-if='isShow'>
                <el-form ref="form" :model="form">
                    <el-form-item label="">
                        <div class='code-img' v-loading="loading"> <img width="100" :src="imgUrl" alt=""> </div>
                    </el-form-item>
                    <i class="el-icon-circle-close-outline close" title="关闭" @click="close"></i>
                </el-form>
            </div>
            <!-- 分页 -->
            <section class="pagination" v-if=" total >5">
                <template v-if="page == 1">
                    <el-button type="primary" disabled>上一页</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="pagePrev">上一页</el-button>
                </template>
                <template v-if="Math.ceil(total/5) <= page">
                    <el-button type="primary" disabled>下一页</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="pageNext">下一页</el-button>
                </template>
            </section>
        </div>
    </div>
</template>
<script>
import leftBar from "../commonComponents/leftBar.vue";
import { mapActions, mapState } from "vuex";
import { storeList, getCode } from "../../data/postData";
export default {
    components: {
        leftBar
    },
    data() {
        return {
            Page: JSON.parse(localStorage.getItem("Page")),
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            data: null,
            isShow: false,
            size: "5",
            page: "1",
            total: "",
            goodsNo: "",
            form: null,
            loading: false,
            imgUrl: ""
        };
    },
    mounted() {
        if (this.Page && this.Page != null) {
            console.log(this.Page);
            this.page = this.Page.page;
            this.searchDepot(this.Page.page);
        } else {
            this.page = 1;
            this.searchDepot(1);
        }
    },
    methods: {
        searchDepot(page) {
            var params = {
                data: {
                    page: page,
                    size: "5"
                }
            };
            this.$fetch
                .post(storeList, params)
                .then(res => {
                    this.data = res.data;
                    this.total = res.total;
                })
                .catch(err => {
                    this.$message({
                        message: err.message,
                        type: "warning"
                    });
                });
        },
        editDepot(scope) {
            this.$router.push({ path: "/editDepot/" + scope.row.storeId });
            localStorage.setItem("Page", JSON.stringify({ page: this.page }));
        },
        close() {
            this.isShow = false;
        },
        checkCode(scope) {
            this.isShow = true;
            this.loading = true;
            console.log(scope);
            let params = {
                data: {
                    page: "pages/home/home",
                    scene: scope.storeNo
                }
            };
            this.$fetch
                .post(getCode, params)
                .then(res => {
                    console.log(res.data);
                    this.form = res.data;
                    this.isShow = true;
                    this.imgUrl = res.data.imgUrl;
                    var newImg = new Image();
                    newImg.src = res.data.imgUrl;
                    newImg.onload = () => {
                        // 图片加载成功后把地址给原来的img
                        this.loading = false;
                        this.imgUrl = newImg.src;
                    };
                })
                .catch(err => {});
        },
        onSubmit() {},
        searchStore() {},
        addDepot() {
            this.$router.push({ path: "/addDepot" });
        },
        handleClick() {},
        handleSelectionChange() {},
        pagePrev() {
            this.page--;
            this.searchDepot(this.page);
        },
        pageNext() {
            this.page++;
            this.searchDepot(this.page);
        }
    }
};
</script>

<style scoped lang="less">
#tab-first {
    width: 50% !important;
}
.el-form-item {
    display: inline-block;
}
.pl {
    margin: 10px 0;
}
.page {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.activity-right {
    h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .addGoods {
        margin-bottom: 20px;
        position: absolute;
        right: 0;
        top: 0;
    }
}
.table {
    position: relative;
    .tabs {
        width: 100%;
        .is-top {
            width: 50%;
        }
    }
    .bottom-pl {
        position: absolute;
        left: 0;
        bottom: 0;
        // width: 100%;
    }
}
.el-form {
    width: 100%;
}
.goodsItem {
    position: relative;
    display: inline-block;
    width: 630px;
    .selGoodsItem {
        width: 179px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
    }
    section {
        position: absolute;
        left: 10px;
        top: 48px;
        background: #fff;
        border: 1px solid #e4e7ed;
        z-index: 99999;
        &:after {
            content: "";
            position: absolute;
            top: -8px;
            left: 75px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 8px solid #e4e7ed;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
        &:before {
            content: "";
            position: absolute;
            top: -6px;
            left: 76px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 6px solid #fff;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            z-index: 99999;
        }
    }
}
.search-2 {
    position: absolute;
    left: 230px;
    bottom: 0px;
    width: 200px;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.table {
    img {
        width: 100px;
    }
}
.jumpPage {
    position: absolute;
    right: 0;
    bottom: 0;
    // width: 300px;
    input,
    .el-input {
        width: 100px !important;
        display: inline-block;
    }
}
.search-input {
    width: 30%;
}
.right {
    float: right;
    margin-right: 5%;
    margin-bottom: 30px;
}
.storeCode {
    width: 400px;
    height: 400px;
    text-align: center;
    overflow: hidden;
    .code-img {
        width: 300px;
        height: 300px;
        margin-top: 30px;
        img {
            width: 300px;
        }
    }
}
</style>